﻿<template>
  <div class="user_index">
    <Loading :loading_mask_flag="loading_mask_flag"></Loading>
    <!--<header_h v-bind:header_name = "header_name"></header_h>-->
    <header ref="header" v-if="user_index_show_data">
      <!-- header_left s-->
      <div class="header_left">
        <img v-bind:src="user_list.image|if_null" class="user_img" v-bind:onerror="default_logo"/>
        <div class="user_id">
            ID:{{user_list.ident|if_null}}
        </div>
        <div class="header_left_bottom_btn" style="background-color:#8fc320;width:25.6vw;height:7vw;line-height:7vw;color:#fff;border-radius:2vw;">
          <!--<div class="header_bz header_left_btn_base">
            备注
          </div>
          <div class="more header_left_btn_base">
            more
          </div>-->
          {{user_list.penName}}
        </div>
     </div>
      <!-- header_left e -->
      <!-- header right s -->
      <div class="header_right" v-if="user_index_show_data">
        <div class="header_right_header" style="opacity: 0">
          <div class="count_num">
            积分：{{user_list.integral|if_null}}
          </div>
          <div class="header_right_dh header_right_base" v-if="ad_visit">
            兑换
          </div>
          <div class="header_right_cz header_right_base" v-if="ad_visit">
            充值
          </div>
       </div>
      <!-- header_table s -->
      <div class="header_table" v-if="user_index_show_data">
          <div class="header_table_header">
                {{user_list.school.schoolName|if_null}}
          </div>
          <div class="header_table_middle">
            <div class="header_table_mid_box" style="border-left:1px solid #eee;">{{user_list.penName|if_null}}</div>
            <div class="header_table_mid_box">{{user_list.sex|if_null}}</div>
            <div class="header_table_mid_box">{{user_list.constellation|if_null}}</div>
          </div>
          <div class="header_table_address">
                {{user_list.address|if_null}}
          </div>
      </div>
      <!--header_table e-->
      </div>
      <!-- header right e -->
    </header>

    <div class="cover_container" v-bind:style="{top:divTop}" ref="contaienr">
      <!-- nav s -->
      <div class="nav" v-bind:class="{show_nav:show_nav_data}" v-if="ad_visit" v-on:click="nav_click($event)" style="display: none;">
        <img v-bind:src="list.list" class="nav_box" v-for="list in img_list" :data-id="list.data_id"/><!--
        --><img src="../../static/img/user_index/21.png" class="nav_click_btn_close" v-on:click="nav_close" v-show="show_nav_data">
        <img src="../../static/img/user_index/20.png" class="nav_click_btn" v-on:click="nav_more" v-show="!show_nav_data">
      </div>
      <!-- nav e -->

      <!-- card s -->
      <div class="card_wrapper">
        <!--dafault card s-->
        <div class="card_wrapper_box">
          <div class="card_header">
            <!--{{user_list.groupName|if_null}}-->
            冒险卡
            <div class="add_advanture" v-on:click="add_ad(user_list.groupId,user_list.coveId)" >  + </div>
          </div>
          <div v-show="!default_card_list" class="wrapper_df_img_card clearfix">
            <img src="../../static/img/card_bg.png" alt="" class="df_card_f_img">
            <img src="../../static/img/df_card_add_more_msg.jpg" alt="" class="df_add_more" v-on:click="add_more">
          </div>
          <scroll :msg="default_card_list" v-if="true" v-show="!!default_card_list"></scroll>
          <!--<scroll :card_mess="user_list.adventurecards" :usst="user_list"></scroll>-->
        </div>
        <!--default card e-->

        <!-- single card box s -->
        <div class="card_wrapper_box" v-for="user_list in card_list">
                 <div class="card_header">
                   <!--v-if="ad_visit"-->
                   {{user_list.groupName|if_null}}
                   <div class="add_advanture" v-on:click="add_ad(user_list.groupId,user_list.coveId)" >  + </div>
                 </div>
              <scroll :msg="user_list.adventurecards" v-if="true"></scroll>
                 <!--<scroll :card_mess="user_list.adventurecards" :usst="user_list"></scroll>-->
            </div>
        <!-- single card box e -->
      </div>
      <!-- card e -->
   </div>
    <!-- input_card btn s -->
    <input_card v-show="show_input_card" class="input_card" @show="c_show_nav"></input_card>
    <!-- input_card btn e -->
    <!-- bottom -btn s -->
    <div class="bottom_nav" style="bottom:15.5vw;">
      <img src="../../static/img/user_index/more_c.png" class="more_c m_r"  v-on:click="show_classify_f">
      <img src="../../static/img/user_index/bottom_add_c.png" class="midd_m" v-on:click="c_show_input">
      <img src="../../static/img/user_index/top.png" class="more_c m_l" v-on:click="go_top">
    </div>
    <!-- bottom btn e -->
    <div style="height:20vw;"></div>
    <!-- classify s -->
    <div class="classify clearfix" v-show="classify_show" v-on:click="show_classify_f">
         <div class="classify_inner clearfix" ref ="classify">
           <div class="classify_box" v-for="list in classify_list" v-onclick="classify">
                {{list.grouping.group|if_null}}
           </div>
         </div>
    </div>
    <!-- classify e -->
    <Footer></Footer>
   </div>
</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters,Store} from 'vuex';
  //limit_Scroll
  import Loading from "../common/Loading/Loading.vue"
  import '../../static/css/mint-ui/style.css'
  import MintUI from 'mint-ui'
  import VueScroller from 'vue-scroller'
  import limit_scroll from "../../static/js/limit_scroll.js";
  import { Toast, Indicator } from 'mint-ui';
  import qs from 'qs';
  import Vue from "vue";
  import "../../static/css/user_index/user_index.css";
  //import scroll from "./scroll/nav_gift_scrol.vue";
  import scroll from "../swiper/user_index_slider/user_index.vue"
  import input_card from "./card_input.vue"
  import axios from 'axios'
  import filter from "../filter/filter.js"
  import "../../static/css/Adventure/user_index_ad.css"
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  import common from "../common/common.js";
  import Footer from "../index/FooterMenu.vue";
  import header_h from "../common/header_other/Header_other.vue"
  Vue.prototype.$http = axios;
  Vue.use(VueScroller);
  Vue.use(MintUI);

  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        divTop: "",
        img_list: [],
        show_nav_data: false,
        show_input_card: false,
        user_list: {},//用户信息
        default_logo: "wx.yizhiweimeng.com/static/static/img/icon_man.png",
        classify_show: false,
        user_id: "",
        class_list: "",
        classify_list: "",
        card_list: "",
        user_index_show_data: false,
        ad_visit:true,
        other_data:"",//scroll other_data
        base_url:"",
        header_name:"我的",
        default_card_list:"",
        loading_mask_flag:true,
        raf:"",
        refresh_data:this.$store.getters.Page_refresh
      }
    },
    activated:function(){
        console.log(this.$router,this.$route)
    },
    beforeCreate: function () {
      //获取用户 信息
      ///api/user / getUserById
    },
    methods: {
      //添加默认冒险卡
      add_more:function () {
        this.$store.dispatch("thom_redirect",
          { name: "/common_card", router: this.$router });
      },
      //nav_click
      nav_click: function ($event) {
        //jump to collect
        if ($event.target.dataset.id == 1) {
          let user_id = localStorage.getItem("user_id");
          mui.plusReady(function () {
            mui.openWindow({
              url: "./new_wx_collect.html?user_id=" + user_id,
              id: "new_wx_collect.html",
              show: {
                autoShow: true,//页面loaded事件发生后自动显示，默认为true
                aniShow: 'slide-in-bottom',//页面显示动画，默认为”slide-in-right“；
              },
            });
          })
        }
      },
      show_classify_f: function () {
        Indicator.open();
        let id = location.search.split("user_id=")[1];
//        let id = common.get_user_or_ad_id();
        //  / api / user / personalHomepage / getAdventureCardsType
        this.$http.post(this.base_url+'/yizhiweimen/api/user/personalHomepage/getAdventureCardsType',
          qs.stringify(
            {
              'uid': id,
            })
          )
          .catch((thrown) => {
          }).then((e) => {
           Indicator.close();
           this.classify_list = e.data;
           this.classify_show = !this.classify_show
          })
      },
      add_ad: function (gid, cid) {
        Indicator.open();
        sessionStorage.setItem("gid",gid);
        sessionStorage.setItem("cid",cid);
        this.$store.dispatch("thom_redirect",
          { name: "/Advanture", router: this.$router });
      },
      nav_more: function () {
        this.show_nav_data = true;
      },
      nav_close: function () {
        this.show_nav_data = false
      },
      c_show_nav: function () {
        this.get_card_mess();
        this.show_input_card = false;
      },
      c_show_input: function () {
        this.show_input_card = true;
      },
      go_top: function () {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
      },
      //获取冒险卡

    },
    created: function () {
      //nav 显示s
//      let list = [];
//      for (let x = 1; x < 20; x++) {
//        let obj = {
//          list: "./static/img/user_index/" + x + ".png",
//          click_btn: false,
//          data_id:x
//        }
//        list.push(obj);
//      }
      //nav 显示e
      common.is_app(this);
      this.$store.commit("set_B_M",{
        img:"",
        title:"",
        voice:"",
        commit:"",
        finish:false
      });
      this.$store.commit("clean_common_card");
      sessionStorage.setItem("add_card_list","");
      let id = location.search.split("user_id=")[1];
      this.user_id = id;
      //用户 list
      Indicator.open();
      this.$http.get(this.base_url+'/yizhiweimen/api/user/getUserById?id=' + id)
        .catch((thrown) => {
          Indicator.close();
        }).then((e) => {
        Indicator.close();
        this.user_list = e.data;
        this.$store.commit("set_user_index_msg",e.data);
        sessionStorage.setItem("user_list_data", JSON.stringify(e.data));
      });
      this.$t_qs = qs;
      this.$t_Indicator = Indicator;
      this.$store.commit("change_this",this);
      this.$store.commit("get_data");
      console.log("default_card_list")
      console.log(default_card_list)
    },
    mounted: function () {
        this.$router.beforeEach((to, from, next) => {
             if(from.fullPath === "/common_card"){
               Indicator.open();
               this.$store.commit("get_data");
             }
             next()
        });

    },
    components: {
      scroll,
      input_card,
      Footer,
      header_h,
      Loading
    }
  }
</script>
<style lang="scss">
  @import "./sass/df_card_user_index.scss";
</style>
<style scoped>
  .cover_native_nav {
    background-color: #87491f;
    width: 100%;
    height: 5.3vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000
  }
  .header_right_header{
      justify-content:space-between;
  }
  .classify_box {
    text-align: center;
    font-size: 1rem;
    color: #fff;
    height: 10.4vw;
    line-height: 10.4vw;
    width: 86vw;
    background-color: #96e54c;
    border-radius: 1vw;
    margin: 3.7vw auto 0;
  }
  .classify_box:nth-last-child(1){
    margin-bottom:3.7vw;
  }
  .classify_inner {
    height:80vh;
    overflow-y:scroll;
    width: 95vw;
    margin: 7.3vw auto;
    background-color: #fff;
    border-radius: 1vw;
  }
  .classify {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index:2000;
    background-color: rgba(0,0,0,0.6);
    top: 0;
    left: 0;
  }
  .box {
    height: 37vw;
  }
  .box_act{
    height:40vw;
  }
  .input_card {
    top: 0;
    left: 0;
    z-index: 100;
    position: fixed;
  }
  .user_img {
    margin:1.2rem 3.2vw 0.25rem 7vw;
  }
  .header_table{
    margin-top:0.5rem;
  }
  .header_table_address{
    height:2.9rem;
  }
  .header_left_btn_base {
    line-height: 1.2rem;
    height: 1.2rem;
    border-radius: 1vw;
  }
  .header_left_bottom_btn {
    justify-content:center;
  }
  .header_table_address {
    height: 15.4vw;
  }
  .header_table_mid_box {
    height: 7.2vw;
    line-height: 7.2vw;
  }
  .count_num {
    margin-top: 0.6rem;
    width: auto;
    padding-left: 1vw;
    padding-right: 1vw;
    height: 6.9vw;
    line-height: 6.9vw;
    color: #cacaca;
    font-size: 3.2vw;
    border-radius: 1.2vw;
    border: 1px solid #cacaca;
    margin-right: 6.5vw;
  }
  .user_id {
    margin-top: 0.56rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    color: #cacaca;
    margin-left: 0;
  }
  .header_left_btn_base{
    height:6.4vw;
    line-height:6.4vw;
  }
  .header_right_base{
    height:7.4vw;
    line-height:7.4vw;
    margin-top:0.6rem;
  }
  .user_img{
    width:20vw;
    height:20vw;
  }
  .nav_click_btn {
    top: 0.5vw;
    right: 0.8vw;
  }
  .wrapper{
    padding-top:0.5rem;
    background-color:#fff;
  }
  .cover_container .show_nav {
    height: auto;
  }
  .bottom_nav{
    z-index:80;
  }
</style>
